<template>
  <div class="all">
    <div class="movie">
      <div class="left"><img :src="obj.img" alt="" /></div>
      <div class="right">
        <h1 class="right-top">{{obj.name}}</h1>
        <p class="right-middle">{{obj.filmdate}}</p>
        <h4 class="right-bottom">猫眼评分<span>9.0</span></h4>
      </div>
    </div>
    <div class="message">
      <div class="message-top">
        <van-tabs v-model="active" title-active-color='red'>
          <van-tab title="日期票房"><ticket-office></ticket-office></van-tab>
          <van-tab title="预售排片"><ticket-office></ticket-office></van-tab>
          <van-tab title="全球票房"><ticket-office></ticket-office></van-tab>
          <van-tab title="预测票房"><ticket-office></ticket-office></van-tab>
          <van-tab title="地区票房"><ticket-office></ticket-office></van-tab>
          <van-tab title="影头票房"><ticket-office></ticket-office></van-tab>
        </van-tabs>
      </div>
      <div class="message-bottom"></div>
    </div>
  </div>
</template>

<script>
import TicketOffice from "../../views/sd/TicketOffice.vue";
export default {
  components: { TicketOffice },

  data() {
    return {
      active: 0,
    };
  },
  created(){
  },
  computed:{
    obj(){
      return JSON.parse(window.sessionStorage.getItem('detailImageName'))
    }
  }
};
</script>

<style scoped>
.movie {
  width: 100%;
  height: 2.2rem;
  background: #191724;
  display: flex;
}
img {
  width: 1rem;
  height: 1.4rem;
  margin: 0.4rem 0.2rem 0.4rem 0.4rem;
}
.right {
  color: white;
  margin-top: 0.4rem;
}
.right-top {
  font-size: 0.35rem;
}
.right-middle {
  font-size: 0.25rem;
}
.right-bottom {
  color: #efaf29;
  font-size: 0.25rem;
  margin-top: 0.2rem;
}
.van-tab--active .van-tab__text {
  color: red;
}
</style>>

